<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:head >



        <title><ui:insert name="titulo">Portal Cidadao</ui:insert></title>
        <h:outputStylesheet name="/css/estilo.css"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <link href="/resources/style.css" rel="stylesheet" type="text/css"></link>
        <style> 
            
            .formPost:dataTable:j_idt30{
            font-family: verdana;
            font-size: 12px;
            font-weight: bold;            
        }
            .ui-stack, 
            .ui-stack .ui-stack { 
                font-size: 20px !important;
                text-align: right !important; 
            }

        </style>

        <script>(function(d, s, id) {	
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

        <!-- Faça o include da lib do jQuery -->
        <script type="text/javascript" src="/lib/scripts/jquery.js"></script>    
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

        <style type="text/css"> 

            #geral {
                position: absolute;
                width: 100%;
                background-color: #FFFFFF;
                float: none;
            }
            #topo {
                width: 950px;
            }
            #h1{
                color: #000064;
                font-family: arial;
                font-size: 15pt;
            }
            #esquerda {       
                color: #000064;
                font-family: verdana;
                font-weight: bold;
                font-size: 10pt;
                float: left;
                width: 2%;
                background-image: url(images/banner_left.png)

            }

            #mapa {
                float: left;
                width: 98%;
            }
            #rodape {
                width: 100%;
                height: 50px;
                clear: both;
                background-image: url(images/rodape.png)
            }

            #saibamais{ 
                font-family: verdana;
                font-size: 12px;
            }
            
            .rotulos{
                font-family: verdana;
                font-size: 12px;
                font-weight: bold;
                color:#4F4F4F;
            }

        </style>
        <script type="text/javascript">
        var lu = false;
        var collect_email = false;
        var includeMap = true;
        </script>
        <script type="text/javascript">
        MIN_ZOOM = 12;
        MAX_ZOOM = 18;
			
        var start = function(){
            if (includeMap) {
                map = new Map();					
            }
			
        }
        </script>
    </h:head>
    <h:body id="main"  onload="start()">

        <div id="tudo">
            <div id="topo" style="width: 100%;">
                <h:graphicImage value="images/superior.png"/>
            </div>

            <div id="esquerda">
                <div style="position: relative; top:10px; height: 250px; width: 200px;">
                    <div id="h1"><b>Portal Cidadão</b><p></p></div>
                    <h>Auxiliar no processo de melhoria da qualidade de vida da sua cidade, através de divulgações de pontos  de interesse ou apoiando problemas existentes.</h>
                    <h:form id="saibamais">
                        <h:outputLink target="about:blank" value="postDialog.show()">
                            <h:outputText value="Saiba Mais"/>
                        </h:outputLink>       
                    </h:form>

                </div>
                <div style="position: relative; top:20px; height: 50px; width: 200px;">  
                    <h:graphicImage value="images/facebook.jpg"/>
                    <h:graphicImage value="images/twitter.jpg"/>
                </div>
                <div style="position: relative; top:50px; height: 170px; width: 200px; color: #000064">
                    <b>APOIO:</b>
                    <h:graphicImage value="images/logoufpr.jpg"/>
                </div>

                <!--<div id="banner1" style="top:10px; height: 150px">
                    teste
                </div>
                <div id="banner2" style="top:10px; height: 200px">
                    <h:graphicImage value="images/facebook.jpg"/>
                    <h:graphicImage value="images/twitter.jpg"/>
                </div>
                <div id="banner3" style="top:10px; height: 200px">
                    teste2
                </div> -->
            </div>

            <div id="mapa">
                <p:growl id="growl" showDetail="true" life="3000" />
                <div id="mapa" float="left">
                    <h:form id="formPost">
                        <p:gmap id="gmap" center="-25.462049157233142,-49.23583326452638" zoom="13" type="HYBRID" model="#{mapBean.advancedModel}" style="width:1130px;height:480px;left:15%;" >   
                            <p:ajax event="overlaySelect" listener="#{commentBean.onMarkerSelect}"  />  
                            <p:gmapInfoWindow id="gmapWindow" maxWidth="200"  >  
                                <div style="width:500px; height:200px;">
                                    <p:commandLink oncomplete="imagemDialog.show()"  >
                                        <p:graphicImage value="#{commentBean.marker.data}" height="150px"  width="150px" style="float:left;" />
                                    </p:commandLink>
                                    <h:outputLabel id="titulo" value="Titulo : #{commentBean.titulo} " styleClass="rotulos" style="padding:10px 20px 10px 50px; float: left; width: 50%;" /><br></br>
                                    <h:outputLabel id="dt" value="Data de criação : #{commentBean.dataPost}" styleClass="rotulos" style="padding:10px 20px 20px 50px; float: left; width: 50%;"  />
                                    <h:outputLabel id="apoios" value="Número de apoios : #{commentBean.apoios}" styleClass="rotulos" style="padding:10px 20px 20px 50px; float: left; width: 50%;"  />
                                    <p:inputTextarea  id="descricao" value="Descrição: #{commentBean.descricao}" readonly="true"  styleClass="rotulos"  style=" margin:10px 20px 10px 50px; float: left; width: 50%;"/>
                                    <p:commandButton style="float: right; margin:20px 35px 1px 0px;" id="postButton"  styleClass="rotulos"  value="Comentários"  onclick="postDialog.show()" update="dataTable"/>
                                    <p:commandButton style="float: right; margin:20px 35px 1px 0px;" action="#{apoiarBean.getUser}" styleClass="rotulos" value="Apoiar" disabled="#{commentBean.buttonStatus}" rendered="#{loginBean.render}" >
                                        <f:setPropertyActionListener target="#{apoiarBean.cod_post}" value="#{commentBean.marker.shadow}"  />
                                    </p:commandButton>
                                    <p:commandButton id="showDialogButton" style="float: left; margin:20px 35px 1px 0px;" styleClass="rotulos" value="Deletar Post" onclick="confirmation.show()" type="button" rendered="#{loginBean.admin}"/>  
                                </div>
                            </p:gmapInfoWindow>  

                        </p:gmap>

                        <ui:include src="imagemDialog.xhtml" />
                        <ui:include src="postDialog.xhtml" />
                        <ui:include src="comentarioDialog.xhtml" />


                    </h:form>

                </div>
            </div>

            <div id="rodape">
                <h:form id="menu">
                    <ui:include src="menu.xhtml" />
                </h:form>
            </div> 

            <ui:include src="confirmaDialog.xhtml" />
            <ui:include src="loginDialog.xhtml" />
            <ui:include src="logoutDialog.xhtml" />
            <ui:include src="cadastroDialog.xhtml" />
            <ui:include src="editDialog.xhtml" />
            <ui:include src="filtroDialog.xhtml" />
            <ui:include src="userDialog.xhtml" />
            <ui:include src="esqueceuSenhaDialog.xhtml" /> 
        </div>  
        <script type="text/javascript">  
        function handleLoginRequest(xhr, status, args) {  
            if(args.validationFailed || !args.loggedIn) {  
                jQuery('#dialog').effect("shake", { times:3 }, 100);  
            } else {  
                loginDialog.hide();  
                jQuery('#loginLink').fadeOut();  
            }  
        }  
        </script>  
        <script type="text/javascript">  
        function handleLoginRequest1(xhr, status, args) {  
            if(args.validationFailed || !args.loggedIn) {  
                jQuery('#dialog').effect("shake", { times:3 }, 100);  
            } else {  
                esqueceuSenhaDialog.hide();  
                jQuery('#loginLink').fadeOut();  
            }  
        }  
        
     
        </script>  

    </h:body>
</html>

